import React, {PureComponent} from 'react'
import {ScrollView,Dimensions, StyleSheet, View, Text, TouchableOpacity, Button, Animated,Image} from 'react-native'

const {width} = Dimensions.get('window')

type Props = {
    // index:number,
    info:Object,
    data:Array,
    // showAll:Function,
}

export default class MineCancelCourseCell extends PureComponent<Props>{


    // renderAll(){
    //     if (this.props.index==0 && this.props.data.length > 2){
    //         return <TouchableOpacity style={{flexDirection:'row',marginRight:24}} onPress={()=>{
    //             this.props.showAll()
    //         }}>
    //             <Text style={{color:'#999999',fontSize:12}}>查看全部</Text>
    //             <Image style={{width:7,height:12,marginLeft:7,}} source={require('../../../res/img/gobal_arrow.png')}/>
    //         </TouchableOpacity>
    //     } else {
    //         return <View/>
    //     }
    // }

    render() {
        let course = this.props.info
        let coupon = course.coupon
        let start_time = course.start_date.substr(5,5).replace('-','月')+'日'
        let end_time = course.end_date.substr(5,5).replace('-','月')+'日'
        let mas_ta = course.teacher[0]
        let tou_ta = course.teacher[1]
        var coupon_title = ''
        var coupon_price = '无优惠券可用'
        if (coupon.price){
            coupon_title = coupon.title
            coupon_price = '此券可用，去结算立减'+coupon.price+'元'
        }
        return <View style={{marginLeft: 8, marginRight: 8}}>
            <View style={{flexDirection: 'row', backgroundColor: 'white', marginTop: 10,alignItems:'center'}}>
                <Text numberOfLines={1} style={styles.title}>{course.title}</Text>
                {this.props.data.length > 1? <Text style={{color:'#db3843',fontSize:12, marginLeft:5,borderWidth:1,borderColor:'#db3843'}}>等</Text>:<View/>}
            </View>
            <View style={{flexDirection: 'row', backgroundColor: 'white', marginTop: 10, alignItems: 'center',}}>
                <Image style={{width: 12, height: 12}} source={require('../../../res/img/select/select_time.png')}/>
                <Text style={[styles.time, {marginLeft: 7}]}>{start_time+'到'+end_time+course.frequency+course.start_time+'-'+course.end_time}</Text>
            </View>
            <View style={{flexDirection: 'row', backgroundColor: 'white', marginTop: 8, alignItems: 'flex-end',}}>
                <View style={{flexDirection: 'row', alignItems: 'center',}}>
                    <Image style={{width: 28, height: 28, borderRadius: 14}}
                           source={{uri:mas_ta.image}}/>
                    <View style={{marginLeft: 10, justifyContent: 'center', height: 28}}>
                        <Text style={styles.teacher}>讲师</Text>
                        <Text style={styles.teacher_show}>{mas_ta.realname}</Text>
                    </View>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center', marginLeft: 30}}>
                    <Image style={{width: 28, height: 28, borderRadius: 14}}
                           source={{uri:tou_ta.image}}/>
                    <View style={{marginLeft: 10, justifyContent: 'center', height: 28}}>
                        <Text style={styles.teacher}>辅导</Text>
                        <Text style={styles.teacher_show}>{tou_ta.realname}</Text>
                    </View>
                </View>
                <View style={{flex: 1}}/>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Image style={{width: 7, height: 8, marginTop: 7}}
                           source={require('../../../res/img/select/select_price.png')}/>
                    <Text style={styles.price}>{course.price}</Text>
                </View>
            </View>
            <View style={{marginTop: 10, flex: 1, height: 24, width: width}}>
                <Image style={{width: (width - 40 - 24), height: 24, position: 'absolute'}}
                       source={require('../../../res/img/detail/order_course_bg.png')}/>
                <View style={{marginTop: 9, flexDirection: 'row', paddingLeft: 8}}>
                    <Text style={{color: '#DB3843', fontSize: 10, marginTop: 1}}>{coupon_title}</Text>
                    <Text style={{color: '#333333', fontSize: 10, marginLeft: 8}}>{coupon_price}</Text>
                </View>
            </View>
        </View>
    }

}

const styles = StyleSheet.create({
    title:{
        fontWeight:'bold',
        color:'rgba(0,0,0,0.8)',
        fontSize:16,
        maxWidth:(width -100),
    },
    time:{
        fontSize:12,
        color:'#999999',
        fontWeight:'200',
    },
    teacher:{
        fontSize:9,
        color:'#333333',
    },
    teacher_show:{
        fontSize:9,
        color:'#999999',
        marginTop:4,
    },
    price:{
        color:'rgba(197, 50, 60, 1)',
        fontSize:19,
        fontWeight:'700',
        marginLeft:6,
    }
})